<template>
  <div class="mod-tenant__tenant">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.fileNumber" placeholder="档号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.specialFeatureName" placeholder="专题名称" clearable></el-input>
      </el-form-item>
      <el-button @click="getDataList()">{{ $t("query") }}</el-button>
    </el-form>
    <div style="width: 103%; height: 15px; background-color: rgb(240, 242, 245); margin: 0 -21px 15px"></div>

    <div style="display: flex;">
      <div style="width: 18%;">
        <el-form-item>
          <el-input v-model="dataForm.archiveCode" placeholder="全宗号" clearable  style="width: 90%;margin-left: 2%">
            <template #append>
              <el-button icon="el-icon-search" @click="getSpecialFeatureTree()"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-tree
          :data="specialFeatureTree"
          :props="defaultProps"
          accordion
          @node-click="handleNodeClick">
        </el-tree>
      </div>
      <div style="height: 800px;width: 15px; background-color: rgb(240, 242, 245);margin-top:-21px;margin-bottom: -241px"></div>
      <div style="width: 85%; margin-left: 25px">
        <el-table ref="multipleTable" stripe v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column label="档号" prop="fileNumber" header-align="center" align="center"></el-table-column>
          <el-table-column label="题名" prop="appraisalTitle" header-align="center" align="center"></el-table-column>
          <el-table-column label="年度" prop="categoryName" header-align="center" align="center"></el-table-column>
          <el-table-column label="档案类型" prop="type" header-align="center" align="center"></el-table-column>
          <el-table-column label="创建日期" prop="createDate" header-align="center" align="center"></el-table-column>
          <el-table-column label="创建人" prop="creator" header-align="center" align="center"></el-table-column>
        </el-table>
        <el-pagination style="padding: 0px 38%" :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
  import useView from "@/hooks/useView";
  import baseService from "@/service/baseService";
  import { IObject } from "@/types/interface";
  import { defineComponent, reactive, toRefs } from "vue";
  export default defineComponent({

    setup() {
      const state = reactive({
        specialFeatureTree: [] as IObject[],
        defaultProps: {
          children: 'children',
          label: 'specialFeatureName'
        },
        getDataListURL: "/archive/special-files/page",
        getDataListIsPage: true,
        dataForm: {
          archiveCode:"",
          fileNumber: "",
          specialFeatureName:"",
          specialFeatureId:""
        }
      });
      return { ...useView(state), ...toRefs(state) };
    },
    created(){
      this.getSpecialFeatureTree()
    },
    methods: {
      handleNodeClick(data) {
        this.getSpecialFileTree(data.id)
      },
      getSpecialFeatureTree(){
        return baseService.get("/archive/special-feature/list",{archiveCode:this.dataForm.archiveCode}).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.specialFeatureTree = res.data;
          console.log(res.data)
        });
      },
      getSpecialFileTree(id){
        this.dataForm.specialFeatureId = id;
        this.getDataList()
      }
    }
  });
</script>
